<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<script src="dict.js"></script>
	<style>
		.tpl{
			display:none;
		}
		.list{
			width:900px;
			height:auto;
			min-height:1px;
			overflow:hidden;
			border:1px #ddd solid;
			margin:0 auto;
		}
		.list-item{
			width:884px;
			height:auto;
			min-height:1px;
			overflow:hidden;
			margin:8px;
			border-bottom:1px #ddd solid;
			clear:both;
		}
		.list-item > .title{
			width:100%;
			height:24px;
			line-height:24px;
			color:#333;
			font-size:15px;
			clear:both;
			overflow:hidden;
			font-weight:bold;
		}
		.list-item > .author{
			width:100%;
			height:24px;
			line-height:24px;
			color:#555;
			font-size:14px;
			clear:both;
			overflow:hidden;
			text-align:right;
		}
		.list-item > .abstracts{
			width:100%;
			height:60px;
			line-height:20px;
			color:#555;
			font-size:12px;
			clear:both;
			overflow:hidden;
		}
	</style>
</head>
<body>
	<div class="list" id="list">
		
	</div>
	<div class="tpl" id="tpl">
		<div class="list-item" node="dwListItem">
			<div class="title" node="dwTitle"></div>
			<div class="abstracts" node="dwAbstracts"></div>
			<div class="author" node="dwAuthor"></div>
		</div>
	</div>
	<script>
		window.onload = function(){
			demoList = document.getElementById('list');
			tpl  = initNode(document.getElementById('tpl'));
			demoList.add = function(data){
				var e = initNode(tpl.dwListItem.cloneNode(true));
				e.dwTitle.innerHTML = data.title;
				e.dwAuthor.innerHTML = data.author;
				e.dwAbstracts.innerHTML = data.abstracts;
				demoList.appendChild(e);
				return e;
			};
			demoList.refresh = function(){
				var i;
				for(i = 0; i < 20; i ++){
					demoList.add({
						title : Dict.createSentence(),
						author : Dict.randomPersonName(),
						abstracts : Dict.createText(20, 200, true)
					});
				}
			};

			demoList.refresh();

			function initNode(dom){
				var i, nd;
				if(!dom || !dom.children || !dom.children.length){
					return dom;
				}
				for(i = 0; i < dom.children.length; i ++){
					nd = dom.children[i].getAttribute('node');
					if(nd){
						dom[nd] = initNode(dom.children[i]);
					}
				}
				return dom;
			}
		}

	</script>
</body>
</html>